<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Online Settings</title>
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.5/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.5/aliplayer-min.js"></script>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    html {
        height: 100%;
    }
    body {
        height: 100%;
    }
    .prism-player {
    }
</style>
</head>
<body>
    <div style="display: flex; flex-direction: column; height: 100%;">
        <div style="background-color: aqua; height: 50%; display: flex;">
            <div style="background-color: beige; width: 50%;"><div class="prism-player" id="classroom1"></div></div>
            <div style="background-color: bisque; width: 50%;"><div class="prism-player" id="sleeproom"></div></div>
        </div>
        <div style="background-color: aquamarine; height: 50%; display: flex;">
            <div style="background-color: bisque; width: 50%;"><div class="prism-player" id="classroom"></div></div>
            <div style="background-color: beige; width: 50%; display: flex; justify-content: center; align-items: center;">
                <fieldset style="width: 50%; height: 50%;">
                    <legend>推流地址设置</legend>
                    <table>
                        <tr>
                            <td style="width: 80px;">教室</td>
                            <td><input type="text" name="classroom_input" id="classroom_input"></td>
                            <td><button type="button" id="classroom_btn">保存&切换</button></td>
                        </tr>
                        <tr>
                            <td>教室-不清晰</td>
                            <td><input type="text" name="classroom1_input" id="classroom1_input"></td>
                            <td><button type="button" id="classroom1_btn">保存&切换</button></td>
                        </tr>
                        <tr>
                            <td>寝室</td>
                            <td><input type="text" name="sleeproom_input" id="sleeproom_input"></td>
                            <td><button type="button" id="sleeproom_btn">保存&切换</button></td>
                        </tr>
                    </table>
                    <br>
                    <button type="button" id="onkeyplay">一键播放</button>
                </fieldset>
            </div>
        </div>
    </div>
<script>
var classroom = new Aliplayer({
    "title": "教室",
  "id": "classroom",
  "source": "",
  "width": "100%",
  "height": "500px",
  "autoplay": true,
  "isLive": true,
  "rePlay": false,
  "playsinline": true,
  "preload": true,
  "controlBarVisibility": "hover",
  "useH5Prism": true
}, function (player) {
    console.log("The player is created");
  }
);
var classroom1 = new Aliplayer({
    "title": "教室1-不清晰",
  "id": "classroom1",
  "source": "",
  "width": "100%",
  "height": "500px",
  "autoplay": true,
  "isLive": true,
  "rePlay": false,
  "playsinline": true,
  "preload": true,
  "controlBarVisibility": "hover",
  "useH5Prism": true
}, function (player) {
    console.log("The player is created");
  }
);
var sleeproom = new Aliplayer({
    "title": "寝室",
  "id": "sleeproom",
  "source": "",
  "width": "100%",
  "height": "500px",
  "autoplay": true,
  "isLive": true,
  "rePlay": false,
  "playsinline": true,
  "preload": true,
  "controlBarVisibility": "hover",
  "useH5Prism": true
}, function (player) {
    console.log("The player is created");
  }
);
const HOST = 'http://101.35.190.152:8005/'
// const HOST = 'http://api3.zwp.cc/'
classroom_input = document.getElementById('classroom_input')
classroom1_input = document.getElementById('classroom1_input')
sleeproom_input = document.getElementById('sleeproom_input')
document.getElementById('classroom_btn').onclick = () => {
    let v = classroom_input.value
    if (!v) return
    classroom.loadByUrl(v)
    fetch(`${HOST}util/liveurl/set?k=classroom&v=${v}`)
    .then(res => console.log(`${res.json()}`))
    .catch(err => console.log(err))
}
document.getElementById('classroom1_btn').onclick = () => {
    let v = classroom1_input.value
    if (!v) return
    classroom1.loadByUrl(v)
    fetch(`${HOST}util/liveurl/set?k=classroom1&v=${v}`)
    .then(res => console.log(`${res.json()}`))
    .catch(err => console.log(err))
}
document.getElementById('sleeproom_btn').onclick = () => {
    let v = sleeproom_input.value
    if (!v) return
    sleeproom.loadByUrl(v)
    fetch(`${HOST}util/liveurl/set?k=sleeproom&v=${v}`)
    .then(res => console.log(`${res.json()}`))
    .catch(err => console.log(err))
}
document.getElementById('onkeyplay').onclick = () => {
    console.log([classroom.getStatus(), classroom1.getStatus(), sleeproom.getStatus()])
    classroom._startPlay()
    classroom1._startPlay()
    sleeproom._startPlay()
    console.log([classroom.getStatus(), classroom1.getStatus(), sleeproom.getStatus()])
}
var _init = () => {

    status = [classroom.getStatus(), classroom1.getStatus(), sleeproom.getStatus()]
    if (status.includes('error')) {
            fetch(`${HOST}util/liveurl/notify?status=${status}`)
            .then(res => res.json())
            .then(res => console.log(status, res.data))
            .catch(err => console.log(err))

            rooms = ['classroom', 'classroom1', 'sleeproom']
            fetch(`${HOST}util/liveurl/get?errroom=${rooms[[classroom.getStatus(), classroom1.getStatus(), sleeproom.getStatus()].indexOf('error')]}`)
            .then(res => res.json())
            .then(res => {
                if (classroom.getStatus() == 'error') {
                    let v = res.data.classroom
                    console.log(v, classroom.getSourceUrl())
                    if (v && v != classroom.getSourceUrl()) {
                        classroom_input.value = v
                        classroom.loadByUrl(v)
                    }
                }
                if (classroom1.getStatus() == 'error') {
                    let v = res.data.classroom1
                    if (v && v != classroom1.getSourceUrl()) {
                        classroom1_input.value = v
                        classroom1.loadByUrl(v)
                    }
                }
                if (sleeproom.getStatus() == 'error') {
                    let v = res.data.sleeproom
                    if (v && v != sleeproom.getSourceUrl()) {
                        sleeproom_input.value = v
                        sleeproom.loadByUrl(v)
                    }
                }
            })
            .catch(err => console.log(err))
    }
}
var timer = () => {
    setTimeout(() => {
        _init()
        timer()
    }, 3000);
}
_init()
timer()
</script>
</body>